<template>
  <div class="detail" v-show="flag">
      <div class="top">
          <div class="name">{{seller.name}}</div>
          <div class="pingfen">
             <img v-for="(item) in Math.floor(seller.score)" :key="item+'d'" src="../assets/img/star36_on@2x.png" alt="">
              <img v-for="(val) in Math.ceil(5-Math.floor(seller.score))" :key="val+'c'" src="../assets/img/star36_half@2x.png" alt="">
          </div>
      </div>
      <div class="content">
          <div class="contenttop">
              <div class="contenttopLeft"></div>
              <div class="youhui">优惠信息</div>
              <div class="contenttopright"></div>
          </div>
          <div class="right">
              <div v-for="(item,key) in seller.supports" :key="item" class="right1 clearflow">
                  <img  :src="require('../assets/img/'+seller.imgs[key].img)" alt="">
                  <span>{{item.description}}</span>
              </div>
               <div class="contenttop">
              <div class="contenttopLeft"></div>
              <div class="youhui">商家公告</div>
              <div class="contenttopright"></div>
          </div>
          </div>
      </div>
      <div class="foot">
          <div class="footcontent">
              {{seller.bulletin}}
          </div>
          <span class="iconfont icon-guanbi" @click="del">
              
          </span>
      </div>
  </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
    data(){
        return{
            flag:true,
            seller:[]
            
        }
    },
    methods:{
        del(){
            this.flag=false;
        }
    },
    computed:{
        ...mapState(["imgs"])
    },
    created:async function(){
    let {data} = await this.$http.get("api/getseller")
    this.seller=data
    this.seller.imgs=this.imgs
    console.log(this.seller);
    }
    ,
}
</script>

<style scoped lang="stylus">
w=100%; s1=24px; s2=28px; s3=32px; c=rgb(255,255,255);dw = 50%;
.detail{
    position: absolute;
    top:0
    width 100%
    height 100%
    background-color: rgba(7,17,27,0.8)
    blur .1rem
    overflow hidden;
    position: absolute;
    backdrop-filter: blur(10px)
    z-index 999px
}
.detail>.top{
    width 100%
    height 3.1rem
    padding-top: 1.28rem
    font-size: s3
    font-weight: 700
    color: c
    line-height: s3
    text-align: center
     position relative
}
.name{
    margin-bottom: 32px
}
.pingfen{
    width:  390px;
    height:  48px;
    display: flex;
    justify-content: space-around
    position: absolute;
    top:75%;
    left: dw;
    transform: translate(-50%,-50%);
}
//内容部分
.content{
    width w;
    height 400px;
    font-size: s3
    color: c;
    font-weight: 700
    line-height: s3
    text-align: center
        display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.contenttop{
     width w;
     height 32px;
     padding: 0px 72px
     display: flex
     justify-content: space-between
     align-items: center
     margin-bottom: 48px
}
.contenttopLeft,.contenttopright{
    width 224px;
    height 4px;
    background-color: rgba(255,255,255,.2);
}
.youhui{
    margin: 0px 24px
    width 150px
    height 32px
}

.right1{
    font-size: s1;
    font-weight:  200;
    color: c;
    line-height: s3;
    margin-bottom: 24px
    width :60%
    margin-left: 200px
    display: flex
    justify-content: start
}
.right1>img{
    width 32px
    height  32px
    margin-right: 12px
}
.foot{
    width: 100%;
    height: 300px;
    padding: 0 1.33333rem;
    text-align: center
}
.footcontent{
    font-size: s1;
    font-weight: 200;
    color: c;
    line-height: 48px
    margin-bottom: 10px
}
.foot>span{
   
    font-size: 0.85333rem;
    color: rgba(255,255,255,0.5);

}
</style>